<template>
	<div
		class="account-avatar flex flex-col justify-end relative"
		:class="{ 'cursor-pointer': toProfile || clickAvatar }"
		@click="onClick">
		<account-avatar-bg :data="backgroundData" :width="width" />
		<base-image
			v-if="accountStore.isLogin"
			:src="imgUrl"
			type="server"
			class="absolute bottom-0 w-full" />
		<base-image v-else src="avatar-default.png" class="absolute bottom-0 w-full" />
		<slot />
	</div>
</template>
<script lang="ts" setup>
import { BaseImage } from '@/components/base'
import AccountAvatarBg from '../account-avatar-bg/index.vue'
import { computed, PropType } from 'vue'
import { Avatar, AvatarBackground } from '@/types'
import { UpSwitchTabsEnum } from '@/components/up'
import { useProfileStore, useAccountStore } from '@/store'

const props = defineProps({
	width: {
		type: Number,
		default: 28
	},
	face: {
		type: String
	},
	background: {
		type: Object as PropType<AvatarBackground | null>
	},
	data: {
		type: Object as PropType<Avatar>
	},
	toProfile: {
		type: Boolean,
		default: true
	},
	clickAvatar: {
		type: Function
	},
	userId: {
		type: [String, Number]
	},
	toProfileTab: {
		type: String as PropType<UpSwitchTabsEnum>,
		default: UpSwitchTabsEnum.sports
	}
})

// const AspectRatio = 78 / 65

const defaultFace = '/avatar-default.png'

const profileStore = useProfileStore()
const accountStore = useAccountStore()
// const style = computed(() => {
// 	return {
// 		width: props.width + 'px',
// 		height: props.width * AspectRatio + 'px'
// 	}
// })

const imgUrl = computed(() => props.face || props.data?.face || defaultFace)

const backgroundData = computed(() => props.background || props.data?.background)

const onClick = () => {
	if (!props.toProfile) {
		return
	}
	if (typeof props.clickAvatar === 'function') {
		props.clickAvatar?.()
		return
	}
	const userId = props.userId || profileStore.userInfo?.userId
	if (!userId) {
		return
	}
	profileStore.showProfile({ show: true, userId, tab: props.toProfileTab })
}
</script>
